<template>
    <div class="verify">
        <fx-header>
        </fx-header>
        <div class="content">
            <div class="title textColor">{{ $t('safeVertify') }}</div>
            <p v-if="currentType == 3">{{ $t('verifyGoogleTips') }}</p>
            <span class="label textColor">{{ currentType == 2 ? $t('emailVerify') : currentType == 1 ? $t('phoneVerify')
                    :
                    $t('googleVerify')
            }}</span>
            <p v-if="currentType == 2">{{ $t('verifyEmailTips', { 'account': account }) }}</p>
            <p v-if="currentType == 1">{{ $t('verifyPhoneTips', { 'account': account }) }}</p>
            <div class="iptbox inputBackground">
                <input type="text" class="inputBackground textColor" :placeholder="$t('entryVerifyCode')"
                    v-model="verifycode" @input="changeInput">
                <span v-if="currentType != 3" @click="senCode">{{ $t('reSendVerifyCode') }}<template v-if="time"> ({{
                        time
                }})s</template></span>
            </div>
            <van-button class="w-full" :disabled="!hightLight" style="margin-top:90px;" type="primary"
                @click="$router.push({ name: 'resetPassword', query: { type: currentType, account, verifycode, username } })">
                {{ $t('nextStep') }}
            </van-button>
            <!-- <button :disabled="!hightLight" class="btn"
                @click="$router.push({ name: 'resetPassword', query: { type: currentType, account, verifycode, username } })"
                :class="hightLight ? 'hightLight' : ''">{{ $t('nextStep')
                }}</button> -->
        </div>
    </div>
</template>

<script setup>
import { _sendVerifyCode } from "@/service/login.api";
import { ref, onMounted, onUnmounted } from "vue";
import { useRoute, useRouter } from "vue-router";
const route = useRoute()

const verifycode = ref('')
const currentType = ref('')
const account = ref('')
const username = ref('')
const hightLight = ref(false)
const timer = ref(null)
const time = ref(0)

onMounted(() => {
    let type = route.query.type;
    currentType.value = type;
    account.value = route.query.account;
    username.value = route.query.username;
    if (currentType.value != 3) {
        clearTimer()
        senCode()
    }
})

const changeInput = () => {
    if (verifycode.value.length == 6) {
        hightLight.value = true;
    } else {
        hightLight.value = false;
    }
}
const senCode = () => {
    if (time.value > 0) {
        return false
    }
    _sendVerifyCode({
        target: account.value,
    }).then((res) => {
        time.value = 30;
        timer.value = setInterval(() => {
            if (time.value > 0) {
                time.value = time.value - 1
            } else {
                time.value = 0;
                clearTimer()
            }
        }, 1000);
    })
}
const clearTimer = () => {
    clearInterval(timer.value)
    timer.value = null
}
onUnmounted(() => {
    clearTimer()
})

</script>

<style lang="scss" scoped>
.verify {
    font-size: 13px;
}

.title {
    font-weight: 700;
    font-size: 26px;
    margin-top: 27px;
    margin-bottom: 17px;
}

.label {
    margin-top: 11px;
}

.content {
    padding: 0 16px;

    p {
        color: $text_color1;
        font-size: 15px;
        margin-bottom: 25px;
    }

    .iptbox {
        height: 44px;
        margin-top: 8px;
        padding: 0 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-radius: 3px;

        input {
            flex: 1;
            height: 100%;
            border: none;
        }

        span {
            color: $color_main;
        }
    }
}
</style>